<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>学生管理</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }


        .layui-table-cell {
            text-align: center;
            height: auto;

            white-space: normal;
        }

        .layui-table img {

            max-width: 300px

        }
    </style>
</head>
<body>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <!--    <a class="layui-btn layui-btn-xs" lay-event="edit">修改密码</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-inline" style="float:left;height:29px;" title="刷新" lay-event="refresh"><i
            class="layui-icon layui-icon-refresh"></i></div>
    <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i
            class="layui-icon layui-icon-search"></i></div>
    <input type="text" id="title" style="width:200px;float:right;height:30px;" placeholder="请输入ID或姓名" autocomplete="off"
           class="layui-input">
</script>

<script src="layui/layui.all.js"></script>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        //向世界问个好
        // layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });
        // var data={"code":0,"msg":"zzzz","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]};
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , url: 'http://localhost:81/user/getAllUser' //数据接口
            //  ,title: '用户表'
            , method: 'POST'
            , where: {type: 0}
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                // ,first: false //不显示首页
                // ,last: false //不显示尾页
                , limits: 10
            }
            , id: 'testReload'
            //  ,data:  data.data
            //  ,page: true //开启分页
            , toolbar: '#toolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: true //开启合计行
            , cols: [[ //表头
                // {type: 'checkbox', height: 40, fixed: 'left'}
                {field: 'id', title: 'ID', width: 80, height: 40, sort: true}
                , {
                    field: 'img',
                    title: '头像',
                    width: 100,
                    height: 100,
                    templet: '<div><img src="{{ d.img }} " style="height: 80px";width:80px></div>'
                }
                , {field: 'name', title: '名字', height: 40}
                , {field: 'account', title: '学号', height: 40}
                , {field: 'pwd', title: '密码', sort: true, height: 40}
                , {field: 'xueyuan', title: '学院', sort: true, height: 40}
                , {field: 'zhuanye', title: '专业', sort: true, height: 40}
                , {field: 'banji', title: '班级', sort: true, height: 40}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });
        //头工具栏事件
        var $ = layui.$;
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'search':
                    // layer.msg('search');
                    var title = $('#title');
                    //执行重载
                    table.reload('testReload', {
                        url: 'http://localhost:81/user/searchUser'
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            type: 0,
                            id: title.val()
                        }
                    });
                    break;
                case 'refresh':
                    // layer.msg('refresh');
                    table.reload('testReload', {
                        url: 'http://localhost:81/user/getAllUser'
                        , where: {
                            type: 0
                        }
                        , page: {
                            curr: 1
                        }
                    })
                    break;
            }
        })
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('确认删除' + data.name + "吗？", function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layui.jquery.ajax({
                        url: "http://localhost:81/user/delUser",
                        data: {'id': data.id},
                        type: "Post",
                        success: function (result) {
                            console.log(result);
                            layer.msg(result.msg);
                            // location.reload(); //删除成功后再刷新
                        },
                        error: function (result) {
                            // $.messager.alert('错误',result.msg);
                        }
                    });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            }
        });


        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 10 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        //上传
        upload.render({
            elem: '#uploadDemo'
            , url: '' //上传接口
            , done: function (res) {
                console.log(res)
            }
        });


    });
</script>
</body>
</html>
